<template>
  <el-row>
    <div class="col-3 p-0">
      <el-drawer size="650px" title="我是标题" direction="ltr" v-model="listshow" :with-header="false" append-to-body>
        <Questionlist v-show="listshow" v-bind="{
        questions: questionlist,
        questionbankid,
      }"></Questionlist>
      </el-drawer>

      <el-button class="btn-11" @click.stop="listshow = !listshow">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-Menu" />
        </svg>
        &nbsp; 题单题目
      </el-button>
    </div>
    <div class="col text-right">
      <el-button class="btn-11" @click="gonext(true)" :disabled="des === 'T' || questionlist.length == 1">
        <el-icon>
          <ArrowLeft />
        </el-icon>上一题
      </el-button>
      <span>
        &nbsp; {{ questionlist.findIndex((v) => v.ID == ID) + 1 }} /
        {{ questionlist.length }} &nbsp;
      </span>
      <el-button class="btn-11" :disabled="des === 'F' || questionlist.length == 1" @click="gonext(false)">
        下一题
        <el-icon>
          <ArrowRight />
        </el-icon>
      </el-button>
    </div>
  </el-row>
</template>

<script setup lang="ts">
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import Questionlist from "./questionlist.vue";
const p = defineProps<{ ID?: number, index?: number, questionlist: Studycodemodel.Iquestion[] }>()
const listshow = ref(false);
const router = useRouter();
const route = useRoute();
const roue = computed<{
  order: string;
  offset: number;
  limit: number;
  questionbankid?: number;
}>(() => {
  return route.query as any;
});
const questionbankid = computed(() => {
  return roue.value.questionbankid;
});

// 上一题
const next1 = computed(() => {

  const i = p.questionlist?.findIndex((v) => v?.ID == p.ID);
  if (p.questionlist && i && i != -1) {
    return p.questionlist[i - 1]?.ID;
  }
  return p.ID;
});

// 下一题
const next2 = computed(() => {
  const i = p.questionlist?.findIndex((v) => v?.ID == p.ID) || 0;
  if (p.questionlist && i != -1) {
    return p.questionlist[i + 1]?.ID;
  }
  return p.ID;
});
function gonext(t: boolean) {
  console.log(t)
  if (t && next1.value) {
    router.push({
      params: {
        ID: next1.value,
      },
      query: {
        ...roue.value,
      },
    });
  } else {
    if (!next2.value) return;
    router.push({
      params: {
        ID: next2.value,
      },
      query: {
        ...roue.value,
      },
    });
  }
}
const des = computed<false | "T" | "F">(() => {
  const z = p.questionlist?.findIndex((v) => v?.ID == p.ID);
  if (z === 0 && roue.value?.offset == 0) {
    return "T";
  }
  const n = p.questionlist?.length || 0;
  if (roue.value?.limit - 1 > n && z === n - 1) {
    return "F";
  }
  return false;
});

</script>
